<template>
  <div>
    <el-dialog
      title="跟进记录"
      :visible.sync="dialogVisible"
      width="1100px">
       <el-table v-loading="trackingLoading" max-height="400" :data="trackingList" border style="width: 100%;">
        <el-table-column prop="contactName" label="联系人姓名" align="center" width="100">
        </el-table-column>
        <el-table-column prop="supplierLevel" label="跟进等级" align="center" width="100">
        </el-table-column>
        <el-table-column prop="followUpValue" label="跟进方式" align="center" width="100">
        </el-table-column>
        <el-table-column prop="trackingMethodValue" label="沟通方式" align="center" width="100">
        </el-table-column>
        <el-table-column prop="trackingPurposeValue" label="跟进目的" align="center" width="100">
        </el-table-column>
        <el-table-column prop="trackingContent" label="跟进内容" align="left" width="200">
        </el-table-column>
        <el-table-column prop="trackingPics" label="附件" align="center" width="200">
          <template slot-scope="{row}">
            <div v-if="row.trackingPics.length > 0">
              <div v-for="(item, index) in row.trackingPics" :key="index"
                :class="{ imgStyle: checkFileType(item) == 'image' }">
                <!-- 音频 -->
                <div v-if="checkFileType(item) == 'audio'">
                  <audio controls style="width: 220px; height: 30px">
                    <source :src="item" type="audio/mpeg" />
                    <source :src="item" type="audio/ogg" />
                    <source :src="item" type="audio/mp3" />
                    您的浏览器不支持该音频格式。
                  </audio>
                </div>
                <!-- 图片 -->
                <div v-else-if="checkFileType(item) == 'image'" style="width: 40px;margin-right:10px">
                  <el-image style="width: 40px; height: 40px;" :src="item" :preview-src-list="Array(item)">
                  </el-image>
                </div>
                <div v-else>
                  <div>{{ item }}</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="trackingTime" label="跟进日期" width="130" align="center">
        </el-table-column>
        <el-table-column prop="trackingUser" label="跟进人" width="100" align="center">
        </el-table-column>
        <el-table-column prop="isInvalid" label="目的是否完成" width="100" align="center">
          <template slot-scope="{row}">
            <div>{{ row.isInvalid == 1 ? '是' : '否' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="nextTrackingTime" label="下次跟进时间" width="100" align="center">
        </el-table-column>
        <el-table-column fixed="right" width="100" label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="userId == scope.row.trackingUserId" type="text" size="mini"
              @click="showSupplierGj('edit', scope.row)">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px;text-align: right;">
        <el-pagination background @size-change="handleSizeChangeTracking" @current-change="handleCurrentChangeTracking"
          layout="total, sizes,prev, pager, next,jumper" :current-page.sync="trackingParams.pageNum"
          :page-size="trackingParams.pageSize" :page-sizes="[10, 15, 20]" :total="trackingCount">
        </el-pagination>
      </div>
    </el-dialog>
    <addSupplierGj ref="addSupplierGj" @update="getTrackingListData"></addSupplierGj>
  </div>
</template>
<script>
import {
  supplierTrackingList,
} from '@/api/partner';
import addSupplierGj from './addSupplierGj.vue';
import { mapGetters } from 'vuex';
export default {
  name: "supplierPopFellow",
  data(){
    return {
      dialogVisible: false,
      trackingParams: {
        supplierId:'',
        type:'self',
        pageNum: 1,
        pageSize: 10,
      },
      trackingList: [],
      trackingCount: 0,
      trackingLoading: false,
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
  },
  filters: {
  },
  components: {
   addSupplierGj,
  },
  methods: {
    // 编辑跟进
    showSupplierGj(type, item) {
      if (type == 'add') {
        this.$refs.addSupplierGj.showPop(type,item)
      } else if (type == 'edit') {
        this.$refs.addSupplierGj.showPop(type,item)
      } else if (type == 'see') {
        this.$refs.addSupplierGj.showPop(type,item)
      }
    },
     // 判断文件类型
    checkFileType(fileName) {
      if (fileName.match(/\.(jpg|jpeg|png|gif|webp)/)) {
        return "image";
      } else if (fileName.match(/\.(doc|docx)/)) {
        return "word";
      } else if (fileName.match(/\.(wav|mp3|aac|ogg|wma)/)) {
        return "audio";
      } else {
        return "unknown";
      }
    },
    //获取跟进记录
    getTrackingListData() {
      this.trackingLoading = true;
      supplierTrackingList(this.trackingParams).then((res) => {
        this.trackingList = res.list;
        this.trackingCount = res.count;
        this.trackingLoading = false;
      }).catch(() => {
        this.trackingLoading = false;
      })
    },
    handleSizeChangeTracking(val) {
      this.trackingParams.pageNum = 1;
      this.trackingParams.pageSize = val;
      this.getTrackingListData();
    },
    handleCurrentChangeTracking(val) {
      this.trackingParams.pageNum = val;
      this.getTrackingListData();
    },
    showPop(item) {
      this.dialogVisible = true;
      this.trackingParams.supplierId = item.supplierId;
      this.getTrackingListData()
    }
  },
}
</script>
<style scoped>
.imgStyle{
  float: left;
}
</style>



